const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const webpack = require('webpack')
// 抽离css文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 转化 .vue 文件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// 压缩 css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 压缩 js
const TerserWebpackPlugin = require('terser-webpack-plugin')
// 导入 babel 的控制文件
const babelConfig = require('./babel.config.js')

module.exports = {
  // 入口文件配置
  entry: './src/main.js',
  output: {
    // js 打包到 dist 下面的 js 文件夹并添加 hash 命名
    // filename: 'js/app.[hash:5].js',
    filename: 'js/app.js',
    // 公共 js 文件位置、命名设置
    // chunkFilename: 'js/[name].js',
    chunkFilename: 'js/[name].js',
    // 打包文件到当 dist 目录
    path: path.join(__dirname, 'dist'),
    // html 基础路径为当前路径
    publicPath: ''
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.css$/,
        use: [
          // 'style-loader', // 将样式通过 style 标签注入
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader'
          }
        ]
      },
      {
        test: /\.vue$/,
        exclude: /node_modules/,
        use: {
          loader: 'eslint-loader',
          options: {
            cache: true,
            fix: true
          }
        },
        enforce: 'pre'
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              esModule: false,
              // name:'[name].[hash:5].[ext]',//设置抽离打包图片的名称--[ext]用来获取图片的后缀,
              name:'[name].[ext]',//设置抽离打包图片的名称--[ext]用来获取图片的后缀,
              limit: 10240,//限制图片大小 <= 10kb 进行base64编码（小于10kb打包进js文件）
              outputPath:'image'//设置输出文件夹名称，这个文件夹会与主入口文件在同一路径下
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'eslint-loader',
          options: {
            cache: true,
            fix: true
          }
        },
        enforce: 'pre'
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: babelConfig.presets
          }
        }
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      // 值要求的是一个代码片段
      BASE_URL: JSON.stringify('/')
    }),
    // 复制对应文件的规则，以便在 .vue 文件中使用
    new VueLoaderPlugin(),
    // 用于生成打包后的 index.html
    new HtmlWebpackPlugin({
      title: 'vueDemo',
      filename: 'index.html',
      template: './public/index.html',
    }),
    // 压缩样式到 dist/css 目录下
    new MiniCssExtractPlugin({
      // filename: 'css/app.[hash:5].css'
      filename: 'css/app.css'
    })
  ],
  optimization: {
    // 模块只导出被使用的成员
    usedExports: true,
    // 当生产模式打开时执行压缩文件，
    minimizer: [
      // css 压缩
      new OptimizeCssAssetsWebpackPlugin(),
      // 压缩js
      new TerserWebpackPlugin()
    ]
  }
}